<script setup lang="ts">
import { LoginForm } from './components'
import { useI18n } from '@/hooks/web/useI18n'
import { useDesign } from '@/hooks/web/useDesign'
import { ref } from 'vue'
import { ElScrollbar } from 'element-plus'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('login')

const { t } = useI18n()

const isLogin = ref(true)
</script>

<template>
  <div
    :class="prefixCls"
    class="relative lt-xl:bg-[var(--login-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
  >
    <ElScrollbar class="h-full">
      <div class="relative flex mx-auto min-h-100vh">
        <div
          :class="`${prefixCls}__left flex-1 bg-white-500 bg-opacity-20 relative`"
        >
          <div class="flex items-center relative text-white">
            <img src="@/assets/imgs/banner.png" alt="" class="w-100% h-100%" />
          </div>

          <div
            class="flex justify-center items-center h-450px w-900px bg-white box-center"
            style="border-radius: 10px;box-shadow: #edf1fd 0 0 3px 0"
          >
            <div class="bg-l">
              <div class="font-normal text-black text-14px" style="font-size: 14px;position: absolute;bottom: 40px;text-align: center" key="3">
                <div>{{ t('login.welcome') }}</div>
                <div style="font-size: 10px;color: #999;padding-top: 4px;">@copyright {{ t('login.loginTitle') }}</div>
              </div>

            </div>
            <div class="w-55% h-100%" style="background: #fff;border-radius: 10px;overflow: hidden;max-width: 125%;min-width: 50%;">
              <div class="flex-1 lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
                <div style="text-align: center;padding: 30px 30px 0; display: flex; justify-content: center">
                  <img src="@/assets/imgs/logo.png" alt="" style="height: 50px;margin: -11px 6px 0px 0px">
                  <span style="height: 30px;font-size: 20px;font-weight: bold;display: flex;align-items: flex-end">杨松</span>
                </div>
                <div
                  class="h-auto flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
                >
                  <LoginForm
                    v-if="isLogin"
                    class="p-20px h-auto m-auto lt-xl:rounded-3xl lt-xl:light:bg-white"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ElScrollbar>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~'@{adminNamespace}-login';

.@{prefix-cls} {
  overflow: auto;

  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      content: '';
    }
  }
}

.box-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bg-l {
  background-image: url('@/assets/imgs/login-img.png');
  background-size: 100% 87%;
  background-repeat: no-repeat;
  width: 45%;
  height: 100%;
  padding: 50px 0 0 0;
  display: flex;
  justify-content: center;
}
</style>
